<template>
  <div class="content_box">
    <div class="main-box">
      <p class="main-title">案件延期申请</p>
      <p class="main-text">注：取保时间一旦修改不可修改，日期请与文书一直后续可案件延期申请。</p>
      <el-form :model="form" :rules="rules" ref="updateForms">
        <el-form-item
          required
          label="上传决定文书"
          label-width="110px"
        >
          <file-upload
            ref="uploadRef"
            :bailId="bailId"
            :disabled="false"
            :accept="'.pdf,.png'"
            :isAccept="false"
            :groupId="2"
            :limit="3"
            :getFileList="fileList"
            @update:file-list="handleUpdateFileList"
            @success="handleSuccess"
          />
          <el-button
          style="margin-left:30px;"
          size="mini"
          type="primary"
          @click="handleUpload"
        >上传文件</el-button>
        </el-form-item>
        <el-form-item prop="end_date" label="结束时间" label-width="110px">
          <el-date-picker
            style="width:90%"
            size="large"
            v-model="form.end_date"
            type="datetime"
            placeholder="请选择结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="备注" label-width="110px" prop="notes">
          <el-input
            size="large"
            style="width:90%"
            v-model="form.notes"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button
          :loading="loading"
          :disabled="loading"
          type="primary"
          @click="submit"
        >
          提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, computed,defineProps,defineEmits,onMounted } from "vue";
import { ElNotification } from "element-plus";
import { updateBailDate,applyBailDelay } from "@/api/bond/pay";
import { getBindAtt } from "@/api/public";

const props = defineProps({
  bailId: {
    type: Number,
  },
  id: {
    type: Number,
  },
});

let form = ref({
  bail_id: props.id,
  attr_img:'',
  end_date: '',
  notes:''
});

const emit = defineEmits(['closeDrawer']);

onMounted(() => {
  // getQuBaoFile()
});

// 上传
const uploadRef = ref(null);
const handleUpload = ()=>{
  uploadRef.value.submitUpload()
}

// 上传成功
let fileArr = []
const handleSuccess = (response) => {
  console.log("Upload successful:", response);
  fileArr = response
};

const handleUpdateFileList = (newList) => {
  console.log("Updated file list:", newList);
};

// 获取上传决定文书
let fileList = ref([])
const getQuBaoFile = async()=>{
  await getBindAtt({bail_id:props.bailId,group_id:2}).then(res=>{
    if(res.code == 1){
      res.data.attachment.map(item=>{
        fileList.value.push({
          name: '11',
          url: item,
        })
      })
    }
  })
}

/*=====提交=====*/
const updateForms = ref();
let loading = ref(false);
const rules = reactive({
  end_date: [
    { required: true, message: "请选择取保结束日期", trigger: "change" },
  ],
});

const submit = async () => {
  await updateForms.value.validate();
  loading.value = true;
  form.value.attr_img = fileArr.join(',')
  console.log(form.value)
  await applyBailDelay(form.value).then((res) => {
    if (res.code == 1) {
      ElNotification({ message: res.msg, type: "success" });
      close()
    } else {
      loading.value = false;
      ElNotification.error(res.msg);
    }
  });
};


// 关闭
const close=()=>{
  form.value.attr_img = ''
  form.value.end_date = ''
  form.value.notes = ''
  loading.value = false
  fileList.value = []
  emit("closeDrawer");
}
</script>
<style scoped lang="scss">
.dialog-footer {
  margin-top:50px;
  text-align: center;
}
.main-box{
  min-height: auto;
}
.main-text{
  margin:20px 0 47px 0;
  font-size: 14px;
  color: #323C4F;
}
</style>
  